/* 自定义 element 暗黑模式样式 */
html {
  &.dark {
    // * Vue3-Template-AdminPro
    --geeker-bg-color: #141414;
    --geeker-main-bg-color: #0d0d0d;
    --geeker-border-light: 1px solid #4c4c4d;
    --light-color: #fff;
    --light-bg-color: #fff;
    --el-card-bg-color: #0d0d0d;
    --el-fill-color-blank: #0d0d0d;

    // * wangEditor
    --w-e-toolbar-color: #595959;
    --w-e-toolbar-bg-color: #eee;
    --w-e-textarea-bg-color: #141414;
    --w-e-textarea-color: #eee;

    // * 以下为自定义暗黑模式内容
    // login
    .login-container {
      background-color: var(--el-fill-color-extra-light) !important;

      .login-box {
        background-color: var(--el-mask-color) !important;

        .login-form {
          background-color: var(--el-bg-color) !important;
          box-shadow: 5px 5px 15px rgb(161 161 161 / 20%) !important;

          .logo-text {
            color: var(--el-text-color-primary) !important;
          }
        }
      }
    }
    // overview
    .overview {
      color: var(--light-color);
    }

    .dashboard {
      .el-card {
        color: #fff;
      }
    }

    // bread-list
    .main-header {
      .header-left {
        color: var(--light-color);

        .bread-crumb {
          --el-text-color-regular: #fff;

          color: var(--light-color) !important;
        }
      }
    }
    // scroll-bar
    ::-webkit-scrollbar {
      background-color: var(--el-scrollbar-bg-color) !important;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--el-border-color-darker) !important;
    }

    // menu
    .el-menu,
    .el-sub-menu,
    .el-menu-item,
    .el-sub-menu__title {
      // background-color: var(--geeker-bg-color) !important;

      &:not(.is-active) {
        color: #bdbdc0 !important;
      }

      &.is-active {
        color: #fff !important;
        background-color: #000 !important;
      }
    }

    .el-menu-item:not(.is-active):hover {
      background-color: var(--geeker-main-bg-color) !important;
    }

    .aside-split {
      background-color: var(--geeker-bg-color) !important;
      border-right: var(--geeker-border-light) !important;

      .logo {
        border-bottom: var(--geeker-border-light) !important;
      }
    }

    // layout
    .el-container {
      .el-aside {
        background-color: var(--geeker-bg-color) !important;
        border-right: var(--geeker-border-light) !important;

        .logo {
          border-bottom: var(--geeker-border-light) !important;
        }
      }

      .not-aside {
        border-right: none !important;
      }

      .el-header {
        background-color: var(--geeker-bg-color) !important;
        border-bottom-color: var(--el-border-color-light) !important;
      }

      .el-main {
        background-color: var(--geeker-main-bg-color) !important;

        .card {
          background-color: var(--geeker-bg-color) !important;
        }
      }

      .el-tabs {
        background-color: var(--geeker-bg-color) !important;
      }

      .el-footer {
        .footer {
          background-color: var(--geeker-bg-color) !important;
          border-top-color: var(--el-border-color-light) !important;

          a {
            color: var(--el-text-color-regular) !important;
          }
        }
      }
    }

    // guide
    #driver-highlighted-element-stage {
      background-color: var(--el-color-info-light-5) !important;
    }
  }
}
